<template>

	<div class="act-prize-list">

		<div class="table-opt-handle" v-if="!max || max > productList.length">

			<div>
				<productSelect multiple :params="{
				order: 'product_price_desc',
				selectFilter:{
					product_on_sale:1
				}
			}" ref="productSelect" v-model="productList"></productSelect>
				<el-button link type="primary" @click="select">
					<i class="fc-icon icon-add"></i> 选择商品
				</el-button>
			</div>

			<div style="display: flex;flex-direction: row;">
				<el-input class="input-with-select" :step="1" :max="100" :placeholder="'批量设置'" type="number"
					v-model.number="defaultCommission.commission_value">
					<template #prepend>
						<el-select @change="selectChange($event,defaultCommission)"
							v-model="defaultCommission.commission_type" placeholder="请选择" style="width: 115px">
							<el-option label="固定金额" value="fixed" />
							<el-option label="按比例" value="percent" />
						</el-select>
					</template>
					<template #append>
						{{defaultCommission.commission_type == 'fixed'? '元' : '%'}}
					</template>
				</el-input>

				<el-button style="margin-left: 5px;" type="primary" @click="bat">
					<i class="fc-icon icon-add"></i> 批量设置
				</el-button>
			</div>
		</div>


		<sc-form-table ref="table" hideAdd v-model="productList" :addTemplate="addTemplate" drag-sort
			placeholder="暂无数据">
			<el-table-column class-name="custom-cell" label="&nbsp;商品信息">
				<template #default="scope">
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item label="商品图片">
							<el-image style="max-width: 80px; max-height: 80px;" preview-teleported hide-on-click-modal
								:src="scope.row.image" :preview-src-list="[scope.row.image]" show-progress fit="contain"
								:z-index="19900501" />
						</el-descriptions-item>
						<el-descriptions-item label="标题">
							<el-input disabled placeholder="标题" size="small" v-model="scope.row.title">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="金额">
							<el-input disabled placeholder="折扣" size="small" v-model.number="scope.row.price">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="积分">
							<el-input disabled placeholder="0" size="small" v-model.number="scope.row.points">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="佣金设置">
							<el-input class="input-with-select" :step="1" :max="100"
								:placeholder="scope.row.commission_type=='default'?'按默认':''" type="number"
								v-model.number="scope.row.commission_value">
								<template #prepend>
									<el-select @change="selectChange($event,scope.row)"
										v-model="scope.row.commission_type" placeholder="请选择" style="width: 115px">
										<el-option label="固定金额" value="fixed" />
										<el-option label="按比例" value="percent" />
									</el-select>
								</template>
								<template #append v-if="scope.row.commission_type !== 'default'">
									{{scope.row.commission_type == 'fixed'? '元' : '%'}}
								</template>
							</el-input>
						</el-descriptions-item>
					</el-descriptions>
				</template>
			</el-table-column>
		</sc-form-table>
	</div>
</template>

<script>
	import productSelect from '@/views/shop/adSpace/select/product.vue'

	import {
		defineComponent
	} from 'vue';
	import {
		copy
	} from '@form-create/utils/lib/extend';

	export default defineComponent({
		name: 'productList',
		emits: ['update:modelValue', 'change'],
		components: {
			productSelect,
		},
		computed: {
			productList: {
				get() {
					return this.modelValue
				},
				set(val) {
					let data = val.map(item => {
						return {
							id: item.id,
							title: item.title || item.product_title,
							image: item.image || item.product_image,
							price: item.price || item.product_price,
							commission_type: item.commission_type || 'fixed',
							commission_value: item.commission_value || 0
						}
					});
					this.$emit('update:modelValue', data);
				}
			},
		},
		props: {
			modelValue: [Array, Object],
			max: {
				type: Number,
				default: 8
			},
			size: String,
		},
		inject: ['designer'],
		data() {
			return {
				addTemplate: {},
				defaultCommission: {
					commission_type: "fixed",
					commission_value: '',
				}
			};
		},
		methods: {
			/*批量设置*/
			bat() {
				const newList = this.productList.map(item => ({
					...item,
					commission_type: this.defaultCommission.commission_type,
					commission_value: this.defaultCommission.commission_value
				}));
				this.productList = newList;
			},
			selectChange(e, row) {
				if (e == 'default') {
					row.commission_value = "";
				} else {
					row.commission_value = 1;
				}
			},
			select() {
				this.$refs.productSelect.toggleMenu((e) => {

				});
			},
		}
	});
</script>

<style scoped>
	.act-prize-list {
		width: 100%;
	}

	.table-opt-handle {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 8px;
	}
</style>
